<template>
  <div class="main-content1">
    <control-bar>
      <!-- <n-row gutter="20">
        <n-col :span="3">
          <n-input v-model:value="searchKeywords" placeholder="请输入关键字"></n-input>
        </n-col>
        <n-col :span="3">
          <n-button type="primary" @click="getImgList">搜索</n-button>
        </n-col>
      </n-row> -->
    </control-bar>
    <main-content :height="60">
      <el-table :data="dataList">
        <el-table-column label="任务名称" property="taskName"> </el-table-column>
        <el-table-column label="进度" property="status"> </el-table-column>
        <!-- <el-table-column label="分幅方式" property="a2">
        </el-table-column> -->
        <!-- <el-table-column label="容量" property="rongliang"> </el-table-column>
        <el-table-column label="耗时" property="haoshi"> </el-table-column> -->
        <el-table-column label="层级" property="levels"> </el-table-column>
        <el-table-column label="范围" property="regionalRange"> </el-table-column>
        <el-table-column label="时间范围" property="timeRange"> </el-table-column>
        <el-table-column label="时间版本分割" property="timeDivide">
        </el-table-column>
        <el-table-column label="分割方式" property="divideType"> </el-table-column>
        <!-- <el-table-column label="分辨率" property="fenbianlv"> </el-table-column> -->
        <el-table-column label="输出格式" property="outputFormat"> </el-table-column>
        <el-table-column label="投影方式" property="projectionMode"> </el-table-column>

        <el-table-column label="创建时间" property="createTime"> </el-table-column>
        <el-table-column label="操作" property="a10">
          <template #default="scope">

            <el-popover
              placement="left-start"
              title="影像列表"
              :width="500"
              trigger="hover"
              @show="showFileList(scope.row)"
              content=""
            > 
              <el-table :data="dataListfile" border stripe :height="300" v-loading="iffileload">
                <el-table-column type="index" width="60" label="序号"/>
                <el-table-column
                  prop="fileName"
                  label="名称"
                  >
                </el-table-column>
                <el-table-column
                  prop="sizeGB"
                  label="大小"
                  >
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="操作"
                  >
                  <template #default="scope1">

                    <el-button type="primary" size="small" @click="downloadFile(scope1.row)">下载</el-button>
                    
                  </template>
                </el-table-column>
              </el-table>
              
              <template #reference>
                <el-button @click="1">影像列表</el-button>
              </template>
            </el-popover>


            <!-- <el-button @click="handShowModel">浏览</el-button> -->
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        v-model:current-page="pageNum"
        @current-change="loadData()"
        :page-size="pageSize"
        :total="totalcount"
      ></el-pagination>

      <el-dialog
        v-model="dialogVisible"
        :title="title"
        width="1000"
        :before-close="handleClose"
      >
        <div class="codeBox" style="height: 500px; overflow: auto">
          <n-code :code="code" language="javascript" />
        </div>

        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" @click="dialogVisible = false"> 关闭 </el-button>
          </div>
        </template>
      </el-dialog>
    </main-content>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import ControlBar from "@/components/common/ControlBar.vue";
import MainContent from "@/components/common/MainContent.vue";

import { apiList } from "@/api/apiList";

import download from "./common/download.js";

let title = ref("查看");
let dialogVisible = ref(false);
const activeDataList = ref([
  {
    renwumingcheng: "郑州任务01",
    jindu: "50%",
    rongliang: "15.3GB",
    haoshi: "35分钟",
    cengji: "18",
    fanwei: "shp001",
    shijianfanwei: "2024.5-2024.9",
    shijianbanbenfenge: "月分割",
    fengefangshi: "国标分幅",
    fenbianlv: "0.5米",
    shuchugeshi: "GEOTIFF",
    touyingfangshi: "WGS84",
    chuangjianshijian: "2024-09-09",
  },
]);


let pageSize = ref(10)
let pageNum = ref(1)
let totalcount = ref(0)

let dataList = ref([])

let dataListfile = ref([])

let iffileload = ref(false)

let hoveritem = {}

function downloadFile(row) {
  let params = {
    "taskName": hoveritem.taskName,//分幅名字
    "pathList":[row.path]//tif路径
  }

  // 接口下载
  apiList.distributeDownfile(params).then(res => {
    download.tif(res, row.fileName);
  })

  // /common/download/resource?resource=/upload/2024/08/22/样例影像31_20240822093405A001.zip
  // console.log(row);
  // 另一种方式   url下载
  // const downloadLink = document.createElement("a");
  // downloadLink.href = "/api/common/download/resource?resource=" + row.path;
  // downloadLink.download = row.fileName;
  // downloadLink.click();
}

function showFileList(row) {
  hoveritem = row
  iffileload.value = true
  apiList.getDistributeListFile(row.distributeId).then(res => {
    iffileload.value = false
    dataListfile.value = res.data
  })
}

function loadData(){

  apiList.getDistributeList(pageSize.value, pageNum.value).then(res => {
    // res.rows
    totalcount.value = res.total
    .imglist
    res.rows.map(item => {
      item['imglist'] = [{
        name: 'aaa.tif',
        size: '5.2GB',
      }]
    })
    dataList.value = res.rows
  })

}

onMounted(() => {
  loadData()
})

const pagination = ref({
  total: 10,
  size: 10,
});
function handShowModel() {
  dialogVisible.value = true;
}
function getImgList() {}
function handleClose() {
  dialogVisible.value = false;
}
</script>
